﻿
html{
  background-color: #000;
}
body{
  font-size: 0.5rem;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
  background: url(../images/bg.jpg) no-repeat 0 0 / cover;
  /* 行高是字体1.15倍 */
  line-height: 1.15;
}
h4,h3,ul{
  margin: 0;
  padding: 0;
  font-weight: normal;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
/* 搭建基础布局  viewport容器 column容器 */
.viewport{
  /* position: relative; */
  min-width: 1024px;
  max-width: 1920px;
  /* 撑开高度  看到背景 */
  min-height: 780px;
  display: flex;
  padding: 4.2rem 0.833rem 0;
  box-sizing: border-box;
}

.viewport .title{
  display: inline-block;
  flex: 1;
  height: 4rem;
  width: 98%;
  position: absolute;
  top: 0;
  margin: auto;
  /* transform: translate(0,-50%); */
  color: #fff;
  background: url('../images/title.gif') no-repeat center;
  /* background: url('../images/dong.gif') no-repeat center/750px 150px; */
  background-size: 1920px 96px;
  text-align: center;
  font-size: 2rem;
  line-height: 4rem;
  /* color: #000; */
}
.viewport .bigScreen{
  color: #fff;
  display: inline-block;
  position: absolute;
  top: 1rem;
  right: 0;
  font-size: 1rem;
  width: 3.5rem;
  height: 1.5rem;
  border-radius: 0.7rem;
  line-height: 1.5;
  background-color: #142957;
}
.viewport .weather{
  position: absolute;
  top: 2.7rem;
  right: 0;
  height: 1.2rem;
  width: 8.9rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-radius: 0.6rem;
}
.viewport .time{
  position: absolute;
  font-size: 0.55rem;
  color: #fff;
  top: 2.7rem;
  left: 0;
  height: 1.2rem;
  width: 13rem;
  line-height: 1.2rem;
  /* background-color: #002060; */
}
.viewport .column{
  flex: 3;
  position: relative;
}
.viewport .column:nth-child(3){
  flex: 4;
  margin: 1.333rem 1.833rem 0;
}

/* 面板容器 */
.panel{
  border: 2rem solid #ccc;
  border-width: 2.125rem 1.583rem 0.833rem 5.5rem;
  border-image: url(../images/border.png) 51 38 20 132;
  position: relative;
  margin-bottom: 0.833rem;
  box-sizing: border-box;
}
.panel .inner{
  position: absolute;
  top: -2.125rem;
  right: -1.583rem;
  bottom: -0.833rem ;
  left: -5.5rem;
  padding: 1rem 1.5rem;
}
.panel h3{
  font-size: 0.833rem;
  color: #fff;
}
h3{
  text-align: center;
  /* background: linear-gradient(45deg,rgb(233, 86, 86), rgb(7, 88, 194) 50%, rgb(13, 200, 224)); */
  /* background: linear-gradient(to right,rgba(82, 196, 241,.8), rgba(24, 40, 85, .8) 35%, rgba(24, 40, 85, .8),rgba(29, 135, 206,.8)); */
  background: linear-gradient(to right,#03686f,rgba(1,3,10,.5) 35%, rgba(1,3,10,.5),#03686f);
}
/*  2020年1-4月贵州省各地区网络零售额占比 */
.overview{
  height: 11.183rem;
}

.overview .salesPie{
  color: #fff;
  font-size: 1.167rem;
  margin-bottom: 0.333rem;
  padding-left: 0.2rem;
  height: 9rem;
}

/* 区域网络零售发展概况 */
.monitor{
  height: 13rem;
}
/* .monitor .inner{
  padding: 1rem 0;
} */
.monitor .inner .salesBar{
  height: 11rem;
}

/* 农产品网络零售发展概况 */
.point {
  height: 14.167rem;
}
.point .chart {
  height: 11.167rem;
  display: flex;
  margin-top: 1rem;
  justify-content: space-between;
}
.point .pie {
  width: 13rem;
  height: 10rem;
  margin-left: -0.4rem;
}
.point .data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 7rem;
  height: 10rem;
  padding: 1.5rem 1.25rem;
  box-sizing: border-box;
  background-image: url(../images/rect.png);
  background-size: cover;
}
.point h4 {
  margin-bottom: 0.4rem;
  font-size: 0.867rem;
  color: #fff;
}
.point span {
  display: block;
  color: #4c9bfd;
  font-size: 0.667rem;
}

/* 地图  */
.map {
  height: 24.1rem;
  margin-bottom: 0.833rem;
  display: flex;
  flex-direction: column;
}
.map h3 {
  line-height: 1;
  padding: 0.667rem 0;
  margin: 0;
  font-size: 0.933rem;
  color: #fff;
}
.map .icon-cube {
  color: #68d8fe;
}
.map .chart {
  flex: 1;
  background-color: rgba(123, 166, 207,0);
  position: relative;
  height: 10.125rem;
}
.map .geo {
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0.8;
}
.map1,
  .map2,
  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 6.475rem;
    height: 6.475rem; */
    width: 17rem;
    height: 17rem;
    background: url('../images/map.png') no-repeat;
    background-size: 100% 100%;
    opacity: 0.6;
  }
  .map2 {
    width: 21.5375rem;
    height: 21.5375rem;
    background-image: url('../images/lbx.png');
    opacity: 0.4;
    animation: rotate 15s linear infinite;
    z-index: 2;
  }
  .map3 {
    width: 19rem;
    height: 19rem;
    background-image: url('../images/jt.png');
    animation: rotate1 10s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
/* 行业网络发展情况 */
.users {
  height: 14.167rem;
  display: flex;
}
.users .chart {
  display: flex;
  margin-top: 1rem;
}
.users .bar {
  width: 24.5rem;
  height: 10rem;
}
.users .data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 7rem;
  height: 10rem;
  padding: 1.5rem 0.9rem;
  box-sizing: border-box;
  background-image: url(../images/rect.png);
  background-size: cover;
}
.users h4 {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: #fff;
}
.users span {
  display: block;
  color: #4c9bfd;
  font-size: 0.6rem;
}

/* 贵州省安顺市电商直播发展概况 */
.sales {
  height: 10.333rem;
}
.sales .online{
  height: 8rem;
}
/* 重点网商网络零售发展概况 */
.enterprise {
  height: 16rem;
}
.enterprise .content{
  height: 13rem;
  color: #fff;
  /* display: none; */
  position: relative;
}
.enterprise .head{
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.583rem;
  margin-top: 0.4rem;
  padding: 0.3rem 0.5rem;
  color: #68d8fe;
  display: flex;
  justify-content: space-between;
  line-height: 0.8rem;
}
/* .enterprise .col:nth-child(1) {
  width: 1.5rem;
} */
.enterprise .head .col:nth-child(2){
  width: 2.7rem;
  padding-left: 1.7rem;
}
.enterprise .head .col:nth-child(3){
  width: 3.4rem;
  padding-left: 3.5rem; 
}

.enterprise .marquee-view{
  position: absolute;
  top: 1.6rem;
  bottom: 0; 
  width: 100%; 
  overflow: hidden;
}
.enterprise .row{
  line-height: 1.05;
  padding: 0.3rem 0.5rem;
  color: #61a8ff;
  font-size: 0.5rem;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.enterprise .row .col:nth-child(2),
.enterprise .row .col:nth-child(3){
  width: 5.4rem;
  /* 不换行  一行省略*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enterprise .row:hover{
  color:#68d8ff;
  background: rgba(255, 255, 255, 0.1);
}
.enterprise .row:hover{
  opacity: 1;
}
.enterprise .marquee{
  animation: scroll-top 15s linear infinite;
}
.enterprise .marquee:hover{
  /* 播放状态  running 播放  paused 暂停 */
  animation-play-state: paused;
}
/* 做动画 */
@keyframes scroll-top {
  0%{}
  100%{
    transform: translateY(-50%);
  }
}

/* 农村网络零售发展概况 */
.top {
  height: 12.2rem;
}
.top .retailBar{
  height: 10.2rem;
}
